<template>
  <el-form ref="form" :model="model" :rules="props.rules" class="login-form" autocomplete="off">
    <el-form-item prop="username">
      <el-input ref="refAccount" v-model="model.username" type="text" size="large" placeholder="请输入帐号">
        <template #prefix>
          <svg-icon icon-class="user" class="el-input__icon input-icon" />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model="model.password" size="large" type="password" autocomplete="off" placeholder="请输入密码">
        <template #prefix>
          <svg-icon icon-class="password" class="el-input__icon input-icon" />
        </template>
      </el-input>
    </el-form-item>
    <el-row :gutter="0">
      <el-col :span="16">
        <el-form-item prop="checkCode">
          <el-input v-model="model.checkCode" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
                    auto-complete="off" size="large" type="text" placeholder="请输入验证码">
            <template #prefix>
              <svg-icon icon-class="validCode" class="el-input__icon input-icon" />
            </template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" style="text-align: right">
        <div style="padding: 2px 0 0 0; display: flex; justify-content: space-between; align-items: center">
          <div/>
          <img alt="" v-if="model.key" style="height: 35px;width: 82px; background-color: #fff"
               :src="model.image" @click="handleChangeCheckCode"/>
          <img alt="" v-else style="margin-top: 2px;" src="~@/assets/checkcode.png" @click="handleChangeCheckCode"/>
        </div>
      </el-col>
    </el-row>
  </el-form>
</template>

<script lang="ts" setup>
import {onMounted, ref} from "vue";
import {getCaptchaCode} from "@/apis";

const form = ref();
const model: any = ref({});
const refAccount = ref();

const refreshCaptcha = async () => {
  const result: any = await getCaptchaCode();
  if (result.data) {
    model.value.key = result.data.key || '';
    model.value.image = 'data:image/jpg+xml;base64,' + result.data.image;
  } else {
    model.value.key = '';
  }
}

onMounted(() => {
  refreshCaptcha();
  setTimeout(() => refAccount.value?.focus());
})

const props = withDefaults(defineProps<{
  rules: any,
  validCode?: any,
  codeImage?: any,
}>(), {});

const handleChangeCheckCode = () => {
  refreshCaptcha();
}

const loginParams = async () => {
  const valid = await form.value?.validate();
  if (valid) {
    return model.value;
  } else {
    return undefined;
  }
}

defineExpose({
  loginParams,
  refreshCaptcha
});

</script>

<style lang='scss' scoped>
.login-form {
  border-radius: 6px;
  .el-input {
    height: 40px;
    input {
      height: 40px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0;
  }
}

:deep(.el-input__inner) {
  background-color: rgba(255,255,255,0) !important;
}
:deep(.el-input__inner:-webkit-autofill) {
  transition: background-color 5000s ease-in-out 0s;
}
:deep(.el-input__inner:-webkit-autofill:focus) {
  -webkit-text-fill-color: #333 !important;
}

</style>
